import { Component, Vue } from "vue-property-decorator";

@Component
class About extends Vue {
  private text: string = "About!";

  get textUpper(): string {
    return this.text.toUpperCase();
  }

  changeText(newText: string): void {
    this.text = newText;
  }

  render(h: Vue.CreateElement): Vue.VNode {
    return (
      <div>
        text by tsx: {this.text} <br />
        TEXT BY TSX: {this.textUpper} <br />
        <input
          on-input={(e: any) => this.changeText(e.target.value)}
          value={this.text}
          type="text"
        />
      </div>
    );
  }
}

export default About;
